<template>
	<view>
		login页面

		<form @submit="formSubmit" @reset="formReset" v-if='isFlag'>
			<view class="uni-form-item uni-column">
				<text class="title">+86</text>
				<input class="uni-input" name="input1" placeholder="输入手机号码" v-model="phone" />
			</view>


			<view class="uni-form-item uni-column">
				<!-- <view class="title">验证码</view> -->
				<input class="uni-input" name="input2" placeholder="输入验证码" v-model="yanzhengma" />
			</view>


			 <button form-type="submit">Submit /登录</button>




		</form>




		<form @submit="formSubmit" @reset="formReset" v-else>
			<view class="uni-form-item uni-column">
				<text class="title">+86</text>
				<input class="uni-input" name="input3" placeholder="用户名" v-model='user' />
			</view>


			<view class="uni-form-item uni-column">
				<!-- <view class="title">验证码</view> -->
				<input class="uni-input" name="input4" placeholder="用户密码" v-model='password' />
			</view>


			  <button form-type="submit">Submit/登录</button>

		</form>



		<button type="default" v-show='isFlag'   @tap='loginMethods(1)'>点击账号密码登录</button>
		<button type="default" v-show='!isFlag'  @tap='loginMethods(2)'>点击验证码登录</button>




	</view>
</template>

<script>
	export default {
		data() {
			return {

				isFlag: true,
				phone: "",
				yanzhengma: '',
				user: "",
				password: ''


			}
		},
		methods: {
			
			loginMethods(i) {
				if(i==1) { // i ==1  表示账号密码登录 
				this.phone=''
				this.yanzhengma=''
					
				}else {
				this.user=''
					this.password=''
					
				}
				
				this.isFlag= !this.isFlag
				
			},
			
			 formSubmit: function(e) {
				 alert('提交')
			                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			                var formdata = e.detail.value
							console.log(formdata)
							
							
			                uni.showModal({
			                    content: '表单数据内容：' + JSON.stringify(formdata),
			                    showCancel: false
			                });
			            },
		}
	}
</script>

<style>
/* @import "../../common/form.css"; */


/* 公共按钮 */
.user-set-btn{
	width: 100%;
	margin: 20upx 0;
	background: #FFE933!important;
	border: 0!important;
	color: #333333!important;
}
.user-set-btn-disable{
	background: #F4F4F4!important;
	border: 1upx solid #EEEEEE!important;
	color: #909090!important;
}

.body{
	padding: 0 20upx!important;
}
.common-input{
	font-size: 30upx;
	border-bottom: 1upx solid #F4F4F4;
}





.login-font-color{ color: #BBBBBB; }
.login-padding{ padding: 20upx 0; }
.icon-guanbi{
	position: fixed;
	top: 60upx;
	left: 30upx;
	font-size: 40upx;
	font-weight: bold;
	color: #332F0A;
	z-index: 100;
}
.loginhead{ width: 100%; }
.other-login-title{
	position: relative;
}
.other-login-title:before,.other-login-title:after{
	content: "";
	position: absolute;
	background: #BBBBBB;
	height: 1upx;
	width: 100upx;
	top: 50%;
}
.other-login-title:before{
	left: 25%;
}
.other-login-title:after{
	right: 25%;
}
.login-input-box{
	position: relative;
}
.login-input-box .forget-input{
	padding-right: 150upx;
}
.login-input-box .forget,.login-input-box .phone{
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 100;
}
.login-input-box .forget{
	width: 150upx;
	right: 0;
}
.login-input-box .phone{
	width:100upx;
	left: 0;
	font-weight: bold;
}
.login-input-box .phone-input{
	padding-left: 100upx;
}
.yanzhengma view{
	background: #EEEEEE;
	border-radius: 10upx;
	font-size: 25upx;
	width: 150upx;
	padding: 10upx 0;
}
</style>
